<template>
  <!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
  <div v-show="error">
    错误的写法:
    <!-- <li v-for="todo in todos" v-if="!todo.isComplete">
      {{ todo.message }}
    </li> -->
  </div>
  <div v-show="!error">
    正确的写法:
    <template v-for="todo in todos">
      <li v-if="!todo.isComplete">
        {{ todo.message }}
      </li>
    </template>
  </div>
  <button @click="errorChange">正确/错误</button>
</template>
<script setup>
import { ref, computed } from "vue";
const todos = ref([
  { message: "Foo", isComplete: false },
  { message: "Bar", isComplete: false },
]);
const error = ref(false);
function errorChange() {
  error.value = !error.value;
  // `todos` 是一个数组的 ref,即便是重新赋值还是会基于原数组的key有更好的性能
  todos.value = todos.value.filter((item) => item.message.match(/Foo/));
}
</script>
